<template>
  <!-- 左侧 -->
  <div class="header-left">
    <el-icon @click="changeCollapse" :size="size">
      <component :is="isCollapse ? 'Fold' : 'Expand'"></component>
    </el-icon>
  </div>
  <!-- 右侧 -->
  <div class="header-right">
    <!-- 刷新 -->
    <el-icon
      :size="size"
      @click="refresh"
      :class="{ 'animate-spin': isRefresh }"
    >
      <Refresh />
    </el-icon>
    <!-- 全屏 -->
    <el-icon :size="size" color="#333" @click="toggle">
      <component :is="isFullscreen ? 'Aim' : 'FullScreen'"></component>
    </el-icon>
    <!-- 我的 -->
    <el-dropdown>
      <span class="el-dropdown-link">
        我的
        <el-icon>
          <arrow-down />
        </el-icon>
      </span>
      <template #dropdown>
        <el-dropdown-menu>
          <el-dropdown-item>个人中心</el-dropdown-item>
          <el-dropdown-item @click="layout">退出</el-dropdown-item>
        </el-dropdown-menu>
      </template>
    </el-dropdown>
  </div>
</template>

<script setup lang="ts">
import { ref } from "vue";
import { useFullscreen } from "@vueuse/core";
const { isFullscreen, enter, exit, toggle } = useFullscreen();
import { Cookies } from "../untils/common";
import { useRouter} from "vue-router"
// icon尺寸
let size = ref(25);
const router = useRouter()
// 侧边栏的收缩与展开
let isCollapse = ref<boolean>(false);
// 自定义事件修改父组件的值
const emit = defineEmits(["changeCollapse"]);
function changeCollapse() {
  isCollapse.value = !isCollapse.value;
  emit("changeCollapse", isCollapse.value);
}
// 刷新页面
let isRefresh = ref<boolean>(false);
function refresh() {
  isRefresh.value = true;
  setTimeout(() => {
    location.reload();
    isRefresh.value = false;
  }, 800);
}
function layout() {
  Cookies.removeToken()
  router.push("/login")
}
</script>

<style lang="postcss" scoped>
.header-right {
  @apply flex;
  align-items: center;
  .el-icon {
    margin-right: 5px;
  }
}
.el-dropdown {
  color: #000;
  margin-left: 10px;
  font-size: 16px;
}
</style>
